<template>
    <div class="hide-correct">
        <ul class="nav">
            <li :class="{'active':showMainIndex === 0}"
                @click="changaNav(0)">待整改隐患</li>
            <li :class="{'active':showMainIndex === 1}"
                @click="changaNav(1)">我的</li>
        </ul>
        <div class="main">
            <div v-show="showMainIndex === 0"
                 v-if="initCorrect">
                <h3>隐患总数:{{listAllCount0}}</h3>
                <noData v-if="listAllCount0 == 0"></noData>
                <div class="bscroll">
                    <vue-better-scroll class="wrapper"
                                       ref="scroll0"
                                       :scrollbar="scrollbarObj"
                                       :pullDownRefresh="pullDownRefreshObj"
                                       :pullUpLoad="pullUpLoadObj"
                                       :startY="parseInt(startY)"
                                       @pullingDown="onPullingDown"
                                       @pullingUp="onPullingUp">
                        <div class="bscroll-container">
                            <ul ref="list"
                                class="list-content">
                                <li v-for="(item,index) in listItems0"
                                    v-bind:key="index">
                                    <router-link :to="{path:'/hideCorrectDetail',query:{id:item.Id,showMainIndex:showMainIndex}}">
                                        <listItem :itemObject='item'></listItem>
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                    </vue-better-scroll>
                </div>
            </div>
            <div v-show="showMainIndex === 1"
                 v-if="initMyMain">
                <h3>隐患总数:{{listAllCount1}}</h3>
                <noData v-if="listAllCount1 == 0"></noData>
                <div class="bscroll">
                    <vue-better-scroll class="wrapper"
                                       ref="scroll1"
                                       :scrollbar="scrollbarObj"
                                       :pullDownRefresh="pullDownRefreshObj"
                                       :pullUpLoad="pullUpLoadObj"
                                       :startY="parseInt(startY)"
                                       @pullingDown="onPullingDown"
                                       @pullingUp="onPullingUp">
                        <div class="bscroll-container">
                            <ul ref="list"
                                class="list-content">
                                <li v-for="(item,index) in listItems1"
                                    v-bind:key="index">
                                    <router-link :to="{path:'/hideCorrectDetail',query:{id:item.Id,showMainIndex:showMainIndex}}">
                                        <listItem :itemObject='item'></listItem>
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                    </vue-better-scroll>
                </div>
            </div>
        </div>
        <myMenu></myMenu>
    </div>
</template>

<script>
// import BScroll from 'better-scroll'
import listItem from '@/commonComponents/listItem/index'
import VueBetterScroll from 'vue2-better-scroll'
import myMenu from '@/commonComponents/menu'
export default {
    data () {
        return {
            showMainIndex: 0, // 显示待整改隐患 0 待整改隐患 1 我的
            initCorrect: true, // 输出花的时候是否显示待整改隐患模块
            initMyMain: false, // 初始化的时候是否显示我的模块
            // dropDown: false
            // 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
            pullDownRefreshObj: {
                threshold: 90,
                stop: 40
            },
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '加载更多',
                    noMore: '没有更多数据了'
                }
            },
            startY: 0, // 纵轴方向初始化位置
            listItems0: [], // 列表集合
            listItems1: [],
            listCount0: 0, // 当前列表条数
            listCount1: 0, // 当前列表条数
            listAllCount0: 0, // 总条数
            listAllCount1: 0, // 总条数
            userInfo: {},
            pageIndex0: 0,
            pageIndex1: 0
        }
    },
    components: {
        VueBetterScroll,
        listItem,
        myMenu
    },
    created () {
        this.$vux.loading.show({
            text: '加载中...'
        })
        this.showMainIndex = this.$route.query.showMainIndex ? parseInt(this.$route.query.showMainIndex) : 0
        this.initMyMain = this.$route.query.showMainIndex == 1
        this.initCorrect = this.$route.query.showMainIndex != 1
        this.userInfo = JSON.parse(localStorage.getItem('userInfo')) || {}
    },
    mounted () {
        this.onPullingDown()
    },
    methods: {
        changaNav (navIndex) {
            this.showMainIndex = navIndex
            if (!this.initMyMain && navIndex == 1) {
                this.initMyMain = true
                this.onPullingDown()
            }

            if (!this.initCorrect && navIndex == 0) {
                this.initCorrect = true
                this.onPullingDown()
            }
        },
        // 模拟数据请求
        getData () {
            let params = {
                'allowPaging': true,
                'business': 'FetchHiddenDangers',
                'data': {
                    'deptId': this.userInfo.deptid,
                    'state': '未整改'
                },
                'pageIndex': this.pageIndex0,
                'pageSize': 20,
                'tokenId': '',
                'userId': this.userInfo.userid
            }
            let params1 = {
                'allowPaging': true,
                'business': 'FetchHiddenDangers',
                'data': {
                    'deptId': this.userInfo.deptid,
                    'resolvePersonId': this.userInfo.userid,
                    'state': '未整改'
                },
                'pageIndex': this.pageIndex1,
                'pageSize': 10,
                'tokenId': '',
                'userId': this.userInfo.userid
            }
            if (this.showMainIndex === 0) {
                return this.$axiosAjax.getConfigJson(params)
            } else {
                return this.$axiosAjax.getConfigJson(params1)
            }
        },
        onPullingDown () {
            // 模拟下拉刷新
            this[`listCount${this.showMainIndex}`] = 0
            this[`pageIndex${this.showMainIndex}`] = 0
            this.getData().then(res => {
                if (res.data.code === 0) {
                    this[`listItems${this.showMainIndex}`] = res.data.data
                    this[`listCount${this.showMainIndex}`] = this[`listItems${this.showMainIndex}`].length
                    this[`listAllCount${this.showMainIndex}`] = res.data.count
                }
                if (this[`listCount${this.showMainIndex}`] < this[`listAllCount${this.showMainIndex}`]) {
                    this.$refs[`scroll${this.showMainIndex}`].forceUpdate(true)
                } else {
                    this.$refs[`scroll${this.showMainIndex}`].forceUpdate(false)
                }
            }).finally(() => {
                this.$vux.loading.hide()
            })
        },
        onPullingUp () {
            // 模拟上拉 加载更多数据
            this[`pageIndex${this.showMainIndex}`]++
            this.getData().then(res => {
                if (res.data.code === 0) {
                    this[`listItems${this.showMainIndex}`] = this[`listItems${this.showMainIndex}`].concat(res.data.data)
                    this[`listCount${this.showMainIndex}`] = this[`listItems${this.showMainIndex}`].length
                }
                if (this[`listCount${this.showMainIndex}`] < this[`listAllCount${this.showMainIndex}`]) {
                    this.$refs[`scroll${this.showMainIndex}`].forceUpdate(true)
                } else {
                    this.$refs[`scroll${this.showMainIndex}`].forceUpdate(false)
                }
            })
        }
    }
}
</script>

<style scoped>
.nav {
    display: flex;
    background: #2269ff;
    padding-bottom: 16px;
}
.nav li {
    height: 50px;
    line-height: 50px;
    flex: 1;
    text-align: center;
    color: #0d3ea6;
    font-size: 15px;
}
.nav li.active {
    color: #fff;
}
.main {
    position: absolute;
    top: 50px;
    bottom: 0;
    width: 100%;
    border-radius: 16px 16px 0 0;
    background: #fff;
    padding-left: 20px;
}
.main h3 {
    height: 40px;
    line-height: 40px;
    padding-right: 20px;
    text-align: right;
    border-bottom: 1px solid #efeff4;
    font-size: 12px;
    color: #2269ff;
}
.bscroll {
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 20px;
    right: 0;
    overflow: hidden;
}
.bscroll-container li {
    border-bottom: 1px solid #efeff4;
    padding: 18px 20px 12px 0;
}
.drop-down {
    position: absolute;
    top: 40px;
    left: 0px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 0.8rem;
    color: #ccc;
}
</style>
<style>
.hide-correct .before-trigger canvas {
    width: 50px !important;
    height: 80px !important;
}
</style>
